﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Front-End 导航</title>
		<link rel="shortcut icon" type="image/x-icon" href="./images/ico.ico">
		<meta name="keywords" content="前端工程师，前端，响应式，UI">
		<meta name="description" content="前端工程师，前端，响应式，UI">	
		<meta name="viewport" content="width=device-width, initial-scale=0.5" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/animate.css" />
		<script type="text/javascript" src="js/wow.js" ></script>
		<style type="text/css">
			@media screen and (max-width: 1150px){
				#nav{
					display: none;
				}
			}
		</style>

	</head>
		<body>
		<header>
			<div id="topBar" class="topBar war">
				<img src="images/logo.png" style="height: 30px; padding-top: 10px;" />
				<nav id="nav" class="nav">
					<ul id="nav_ul" class="nav_ul">
													<a href="#page_0" class="nav_list">
								<li>圈子</li>
							</a>
													<a href="#page_1" class="nav_list">
								<li>CSS/HTML</li>
							</a>
													<a href="#page_2" class="nav_list">
								<li>JavaScript</li>
							</a>
													<a href="#page_3" class="nav_list">
								<li>移动端/响应式</li>
							</a>
													<a href="#page_4" class="nav_list">
								<li>文档/资源库</li>
							</a>
													<a href="#page_5" class="nav_list">
								<li>免费素材</li>
							</a>
													<a href="#page_6" class="nav_list">
								<li>数据接口/平台</li>
							</a>
													<a href="#page_7" class="nav_list">
								<li>实用工具</li>
							</a>
													<a href="#page_8" class="nav_list">
								<li>找工作</li>
							</a>
													<a href="#page_9" class="nav_list">
								<li>我的链接</li>
							</a>
											</ul>
				</nav>
			</div>
		</header>
		<div id="content" class="content">
			<div id="content_war" class="content_war war">
									<div id="_page_0" class="content_list wow fadeInDown">
					  	<div class="content_list_title">圈子</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">前端学习</div>
								<div class="main_classify_war">
																	<a href="http://www.w3cschool.cc/" target="_blank">
										<div class="main_classify_list">w3cschool</div>
									</a>
																	<a href="http://www.imooc.com/" target="_blank">
										<div class="main_classify_list">慕课网</div>
									</a>
																	<a href="http://www.chuanke.com/" target="_blank">
										<div class="main_classify_list">百度传课</div>
									</a>
																	<a href="http://www.jq-school.com/" target="_blank">
										<div class="main_classify_list">jQuery-School</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">前端导航</div>
								<div class="main_classify_war">
																	<a href="http://www.whycss.com/" target="_blank">
										<div class="main_classify_list">前端网址导航</div>
									</a>
																	<a href="http://www.qdjhu.com/sitemap3.html" target="_blank">
										<div class="main_classify_list">前端江湖</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">博客/社区</div>
								<div class="main_classify_war">
																	<a href="http://blog.csdn.net/web/index.html" target="_blank">
										<div class="main_classify_list">CSDN</div>
									</a>
																	<a href="http://www.w3cfuns.com/" target="_blank">
										<div class="main_classify_list">W3Cfuns</div>
									</a>
																	<a href="http://www.wufangbo.com/" target="_blank">
										<div class="main_classify_list">前端开发-武方博</div>
									</a>
																	<a href="http://www.cnblogs.com/cate/108703/" target="_blank">
										<div class="main_classify_list">博客园</div>
									</a>
																	<a href="http://www.w2bc.com/web" target="_blank">
										<div class="main_classify_list">爱编程</div>
									</a>
																	<a href="http://www.w3cplus.com/node/683" target="_blank">
										<div class="main_classify_list">W3Cplus</div>
									</a>
																	<a href="http://www.oschina.net/blog" target="_blank">
										<div class="main_classify_list">开源中国</div>
									</a>
																	<a href="http://www.qianduan.net/" target="_blank">
										<div class="main_classify_list">前端观察</div>
									</a>
																	<a href="http://www.iteye.com/blogs/category/web" target="_blank">
										<div class="main_classify_list">ITeYe</div>
									</a>
																	<a href="http://web.jobbole.com/" target="_blank">
										<div class="main_classify_list">伯乐在线</div>
									</a>
																	<a href="http://www.zhihu.com/topics" target="_blank">
										<div class="main_classify_list">知乎</div>
									</a>
																	<a href="http://www.douban.com/" target="_blank">
										<div class="main_classify_list">豆瓣</div>
									</a>
																	<a href="http://www.w3ctech.com/" target="_blank">
										<div class="main_classify_list">w3ctech</div>
									</a>
																	<a href="http://fequan.com/" target="_blank">
										<div class="main_classify_list">前端圈</div>
									</a>
																	<a href="http://f2e.im/" target="_blank">
										<div class="main_classify_list">F2E社区</div>
									</a>
																	<a href="http://www.html-js.com/" target="_blank">
										<div class="main_classify_list">前端乱炖</div>
									</a>
																	<a href="http://www.daqianduan.com/" target="_blank">
										<div class="main_classify_list">大前端</div>
									</a>
																	<a href="http://fequan.com/" target="_blank">
										<div class="main_classify_list">前端圈</div>
									</a>
																	<a href="http://www.w3cmark.com/" target="_blank">
										<div class="main_classify_list">前端笔记</div>
									</a>
																	<a href="http://www.kuaipao8.com/" target="_blank">
										<div class="main_classify_list">Web开发分享</div>
									</a>
																	<a href="http://tutorialzine.com/" target="_blank">
										<div class="main_classify_list">Tutorialzine</div>
									</a>
																	<a href="http://www.csswang.com/" target="_blank">
										<div class="main_classify_list">CSSwang</div>
									</a>
																	<a href="http://www.html5cn.org/" target="_blank">
										<div class="main_classify_list">HTML5中国</div>
									</a>
																	<a href="http://tympanus.net/codrops/" target="_blank">
										<div class="main_classify_list">Codrops</div>
									</a>
																	<a href="http://www.nowcoder.com/" target="_blank">
										<div class="main_classify_list">牛客网</div>
									</a>
																	<a href="http://bubuko.com/infolist-2-1.html" target="_blank">
										<div class="main_classify_list">布布扣</div>
									</a>
																	<a href="http://www.nowcoder.com/" target="_blank">
										<div class="main_classify_list">牛客网</div>
									</a>
																	<a href="http://www.nowcoder.com/" target="_blank">
										<div class="main_classify_list">牛客网</div>
									</a>
																	<a href="http://lvwenhan.com/" target="_blank">
										<div class="main_classify_list">岁寒</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">阿里UED</div>
								<div class="main_classify_war">
																	<a href="http://ued.taobao.com/" target="_blank">
										<div class="main_classify_list">淘宝UED</div>
									</a>
																	<a href="http://www.aliued.cn/" target="_blank">
										<div class="main_classify_list">阿里巴巴(中文站 )UED</div>
									</a>
																	<a href="http://www.aliued.com/" target="_blank">
										<div class="main_classify_list">阿里巴巴(国际站)UED</div>
									</a>
																	<a href="http://ued.alimama.com/" target="_blank">
										<div class="main_classify_list">阿里妈妈UED</div>
									</a>
																	<a href="http://ued.alipay.com/" target="_blank">
										<div class="main_classify_list">支付宝UED</div>
									</a>
																	<a href="http://ped.alipay.com/" target="_blank">
										<div class="main_classify_list">支付宝PED</div>
									</a>
																	<a href="http://ued.tmall.com/" target="_blank">
										<div class="main_classify_list">天猫UED</div>
									</a>
																	<a href="http://sed.tmall.com/" target="_blank">
										<div class="main_classify_list">天猫SED</div>
									</a>
																	<a href="http://ux.etao.com/" target="_blank">
										<div class="main_classify_list">一淘网UX</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">百度UED</div>
								<div class="main_classify_war">
																	<a href="http://www.baiduux.com/" target="_blank">
										<div class="main_classify_list">百度UEO</div>
									</a>
																	<a href="http://mux.baidu.com/" target="_blank">
										<div class="main_classify_list">百度MUX</div>
									</a>
																	<a href="http://ued.baidu.com/" target="_blank">
										<div class="main_classify_list">百度UED</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">腾讯UED</div>
								<div class="main_classify_war">
																	<a href="http://cdc.tencent.com/" target="_blank">
										<div class="main_classify_list">腾讯CDC</div>
									</a>
																	<a href="http://isd.tencent.com/" target="_blank">
										<div class="main_classify_list">腾讯ISD</div>
									</a>
																	<a href="http://wsd.tencent.com/" target="_blank">
										<div class="main_classify_list">腾讯WSD</div>
									</a>
																	<a href="http://isux.tencent.com/" target="_blank">
										<div class="main_classify_list">腾讯ISUX</div>
									</a>
																	<a href="http://gdc.qq.com/" target="_blank">
										<div class="main_classify_list">腾讯GDC</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">新浪UED</div>
								<div class="main_classify_war">
																	<a href="http://ued.sina.com/" target="_blank">
										<div class="main_classify_list">新浪UED</div>
									</a>
																	<a href="http://udc.weibo.com/" target="_blank">
										<div class="main_classify_list">微博UDC</div>
									</a>
																	<a href="http://ued.leju.com" target="_blank">
										<div class="main_classify_list">新浪乐居UED</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">搜狐UED</div>
								<div class="main_classify_war">
																	<a href="http://ued.sohu.com/" target="_blank">
										<div class="main_classify_list">搜狐UED</div>
									</a>
																	<a href="http://ued.focus.cn/" target="_blank">
										<div class="main_classify_list">搜狐焦点UED</div>
									</a>
																	<a href="http://mued.sohu.com/" target="_blank">
										<div class="main_classify_list">搜狐MUED</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">其他UED</div>
								<div class="main_classify_war">
																	<a href="http://ucd.blog.163.com/" target="_blank">
										<div class="main_classify_list">网易杭州UED</div>
									</a>
																	<a href="http://ued.ctrip.com/" target="_blank">
										<div class="main_classify_list">携程UED</div>
									</a>
																	<a href="http://www.75team.com/" target="_blank">
										<div class="main_classify_list">360奇舞团</div>
									</a>
																	<a href="http://ued.iciba.com/" target="_blank">
										<div class="main_classify_list">爱词霸UED</div>
									</a>
																	<a href="http://blog.19ued.com/" target="_blank">
										<div class="main_classify_list">19楼UED</div>
									</a>
																	<a href="http://tid.tenpay.com/" target="_blank">
										<div class="main_classify_list">财付通TID</div>
									</a>
																	<a href="http://cued.xunlei.com/" target="_blank">
										<div class="main_classify_list">迅雷CUED</div>
									</a>
																	<a href="http://ued.myechinese.com/" target="_blank">
										<div class="main_classify_list">MyEChinese UED</div>
									</a>
																	<a href="http://www.gameued.com/" target="_blank">
										<div class="main_classify_list">昆仑游戏UED</div>
									</a>
																	<a href="http://uxc.360.cn/" target="_blank">
										<div class="main_classify_list">360UXC</div>
									</a>
																	<a href="http://ued.yhd.com/blog" target="_blank">
										<div class="main_classify_list">1号店UED</div>
									</a>
																	<a href="http://jdc.jd.com/" target="_blank">
										<div class="main_classify_list">京东设计中心</div>
									</a>
																	<a href="http://vc.changyou.com/" target="_blank">
										<div class="main_classify_list">畅游视觉设计中心</div>
									</a>
																	<a href="http://www.jiawin.com/topics/ued" target="_blank">
										<div class="main_classify_list">觉唯设计</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_1" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">CSS/HTML</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">HTML5</div>
								<div class="main_classify_war">
																	<a href="http://ask.dcloud.net.cn/explore/" target="_blank">
										<div class="main_classify_list">5+ App</div>
									</a>
																	<a href="http://create.maka.im/user/login" target="_blank">
										<div class="main_classify_list">MAKA网站快速制作</div>
									</a>
																	<a href="http://www.zuiku.com/" target="_blank">
										<div class="main_classify_list">最酷</div>
									</a>
																	<a href="http://www.iguoguo.net/" target="_blank">
										<div class="main_classify_list">爱果果</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">动画库</div>
								<div class="main_classify_war">
																	<a href="http://daneden.github.io/animate.css/" target="_blank">
										<div class="main_classify_list">Animate.css</div>
									</a>
																	<a href="http://h5bp.github.io/Effeckt.css/" target="_blank">
										<div class="main_classify_list">Effeckt.css</div>
									</a>
																	<a href="http://minimamente.com/example/magic_animations/" target="_blank">
										<div class="main_classify_list">magic</div>
									</a>
																	<a href="http://necolas.github.io/normalize.css/" target="_blank">
										<div class="main_classify_list">Normalize.css</div>
									</a>
																	<a href="http://cssreset.com/" target="_blank">
										<div class="main_classify_list">CSS Reset</div>
									</a>
																	<a href="http://css3clickchart.com/#box-sizing" target="_blank">
										<div class="main_classify_list">css3ClickChart</div>
									</a>
																	<a href="http://css3please.com/" target="_blank">
										<div class="main_classify_list">css3please</div>
									</a>
																	<a href="http://www.htmleaf.com/css3/css3donghua/201501061116.html" target="_blank">
										<div class="main_classify_list">csshake抖动库</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">炫酷效果</div>
								<div class="main_classify_war">
																	<a href="http://www.htmleaf.com/Demo/201409298.html" target="_blank">
										<div class="main_classify_list">HTML5超炫3D元素周期表</div>
									</a>
																	<a href="http://www.htmleaf.com/Demo/201501061113.html" target="_blank">
										<div class="main_classify_list">基于snabbt.js的精彩动画</div>
									</a>
																	<a href="http://www.htmleaf.com/css3/css3donghua/2014100881.html" target="_blank">
										<div class="main_classify_list">css3的画廊图片切换3d翻转效果</div>
									</a>
																	<a href="http://ask.dcloud.net.cn/explore/" target="_blank">
										<div class="main_classify_list">5+ App</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_2" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">JavaScript</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">原生开发</div>
								<div class="main_classify_war">
																	<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">
										<div class="main_classify_list">MozillaJavaScriptGuide</div>
									</a>
																	<a href="http://www.javascriptsource.com/" target="_blank">
										<div class="main_classify_list">JavaScriptSource</div>
									</a>
																	<a href="http://bonsaiden.github.io/JavaScript-Garden/zh/" target="_blank">
										<div class="main_classify_list">JS秘密花园</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">JavaScript库/框架</div>
								<div class="main_classify_war">
																	<a href="http://jquery.com/" target="_blank">
										<div class="main_classify_list">jQuery</div>
									</a>
																	<a href="http://yuilibrary.com/" target="_blank">
										<div class="main_classify_list">YUI3</div>
									</a>
																	<a href="http://angularjs.org/" target="_blank">
										<div class="main_classify_list">AngularJS</div>
									</a>
																	<a href="http://knockoutjs.com/" target="_blank">
										<div class="main_classify_list">knockout</div>
									</a>
																	<a href="http://dojotoolkit.org/" target="_blank">
										<div class="main_classify_list">Dojo</div>
									</a>
																	<a href="http://mootools.net/" target="_blank">
										<div class="main_classify_list">MooTools</div>
									</a>
																	<a href="http://docs.kissyui.com/" target="_blank">
										<div class="main_classify_list">KISSY</div>
									</a>
																	<a href="http://backbonejs.org/" target="_blank">
										<div class="main_classify_list">Backbone</div>
									</a>
																	<a href="http://nej.netease.com/" target="_blank">
										<div class="main_classify_list">NEJ</div>
									</a>
																	<a href="http://www.sencha.com/products/extjs/" target="_blank">
										<div class="main_classify_list">ExtJS</div>
									</a>
																	<a href="http://prototypejs.org/" target="_blank">
										<div class="main_classify_list">Prototype</div>
									</a>
																	<a href="http://emberjs.com/" target="_blank">
										<div class="main_classify_list">emberjs</div>
									</a>
																	<a href="http://bouncejs.com/" target="_blank">
										<div class="main_classify_list">bounce.js</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">jQuery插件</div>
								<div class="main_classify_war">
																	<a href="http://www.htmleaf.com/" target="_blank">
										<div class="main_classify_list">jQuery之家</div>
									</a>
																	<a href="http://jqueryui.com/" target="_blank">
										<div class="main_classify_list">jQueryUI</div>
									</a>
																	<a href="https://github.com/alvarotrigo/fullPage.js" target="_blank">
										<div class="main_classify_list">fullPage.js</div>
									</a>
																	<a href="http://www.internetke.com/effects/menu/2015/0402/1523.html" target="_blank">
										<div class="main_classify_list">搜狗浏览器响应式（全屏）整屏切换</div>
									</a>
																	<a href="http://www.htmleaf.com/jQuery/Layout-Interface/201501281289.html" target="_blank">
										<div class="main_classify_list">jQuery Transit 动画库</div>
									</a>
																	<a href="http://www.htmleaf.com/jQuery/Image-Effects/201501061112.html" target="_blank">
										<div class="main_classify_list">snabbt.js</div>
									</a>
																	<a href="http://www.biaodianfu.com/editor.html" target="_blank">
										<div class="main_classify_list">开源编辑器</div>
									</a>
																	<a href="http://www.jq22.com/" target="_blank">
										<div class="main_classify_list">jQuery插件库</div>
									</a>
																	<a href="http://www.oschina.net/project/tag/273/jquery" target="_blank">
										<div class="main_classify_list">osChina jQuery插件</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_3" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">移动端/响应式</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">移动端</div>
								<div class="main_classify_war">
																	<a href="http://jquerymobile.com/" target="_blank">
										<div class="main_classify_list">jQueryMobile</div>
									</a>
																	<a href="http://joapp.com/" target="_blank">
										<div class="main_classify_list">Joapp</div>
									</a>
																	<a href="http://www.dcloud.io/docs/api/index.shtml" target="_blank">
										<div class="main_classify_list">5+ App</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">响应式开发</div>
								<div class="main_classify_war">
																	<a href="http://www.bootcss.com/" target="_blank">
										<div class="main_classify_list">Bootstrap</div>
									</a>
																	<a href="http://getuikit.com/" target="_blank">
										<div class="main_classify_list">UI Kit</div>
									</a>
																	<a href="http://getwebplate.com/" target="_blank">
										<div class="main_classify_list">GetWebplate</div>
									</a>
																	<a href="http://cardinalcss.com/" target="_blank">
										<div class="main_classify_list">Cardinal</div>
									</a>
																	<a href="http://purecss.io/" target="_blank">
										<div class="main_classify_list">Pure</div>
									</a>
																	<a href="http://base.gs/" target="_blank">
										<div class="main_classify_list">Base</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_4" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">文档/资源库</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">前端文档</div>
								<div class="main_classify_war">
																	<a href="http://www.w3cschool.cc/tags/html-reference.html" target="_blank">
										<div class="main_classify_list">HTML</div>
									</a>
																	<a href="http://www.w3cschool.cc/cssref/css-reference.html" target="_blank">
										<div class="main_classify_list">CSS</div>
									</a>
																	<a href="http://www.divcss5.com/css3/" target="_blank">
										<div class="main_classify_list">CSS3</div>
									</a>
																	<a href="http://www.w3.org/html/ig/zh/wiki/HTML5" target="_blank">
										<div class="main_classify_list">HTML5</div>
									</a>
																	<a href="http://www.php100.com/manual/javascript.html" target="_blank">
										<div class="main_classify_list">JavaScript</div>
									</a>
																	<a href="http://jquery.cuishifeng.cn/" target="_blank">
										<div class="main_classify_list">jQuery</div>
									</a>
																	<a href="http://nodeapi.ucdok.com/" target="_blank">
										<div class="main_classify_list">NodeJs</div>
									</a>
																	<a href="http://www.apjs.net/" target="_blank">
										<div class="main_classify_list">AngularJS</div>
									</a>
																	<a href="http://www.html5plus.org/doc/h5p.html" target="_blank">
										<div class="main_classify_list">5+ App</div>
									</a>
																	<a href="http://nodeapi.ucdok.com/" target="_blank">
										<div class="main_classify_list">NodeJs</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">静态资源库</div>
								<div class="main_classify_war">
																	<a href="http://cdn.code.baidu.com/" target="_blank">
										<div class="main_classify_list">百度静态资源公共库</div>
									</a>
																	<a href="http://www.bootcdn.cn/" target="_blank">
										<div class="main_classify_list">BootCDN</div>
									</a>
																	<a href="http://festatic.aliapp.com/" target="_blank">
										<div class="main_classify_list">前端静态资源</div>
									</a>
																	<a href="http://www.cdnjs.net/" target="_blank">
										<div class="main_classify_list">CDNJS.NET</div>
									</a>
																	<a href="http://festatic.aliapp.com/" target="_blank">
										<div class="main_classify_list">前端静态资源</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">前端书籍</div>
								<div class="main_classify_war">
																	<a href="http://search.dangdang.com/?key=JavaScript高级程序设计(第3版)" target="_blank">
										<div class="main_classify_list">JavaScript高级程序设计(第3版)</div>
									</a>
																	<a href="http://search.dangdang.com/?key=JavaScript权威指南(第6版)" target="_blank">
										<div class="main_classify_list">JavaScript权威指南(第6版)</div>
									</a>
																	<a href="http://search.dangdang.com/?key=JavaScript DOM编程艺术(第2版)" target="_blank">
										<div class="main_classify_list">JavaScript DOM编程艺术(第2版)</div>
									</a>
																	<a href="http://search.dangdang.com/?key=JavaScript设计模式" target="_blank">
										<div class="main_classify_list">JavaScript设计模式</div>
									</a>
																	<a href="http://search.dangdang.com/?key=锋利的jQuery(第2版)" target="_blank">
										<div class="main_classify_list">锋利的jQuery(第2版)</div>
									</a>
																	<a href="http://search.dangdang.com/?key=HTTP权威指南" target="_blank">
										<div class="main_classify_list">HTTP权威指南</div>
									</a>
																	<a href="http://search.dangdang.com/?key=精通正则表达式(第3版)" target="_blank">
										<div class="main_classify_list">精通正则表达式(第3版)</div>
									</a>
																	<a href="http://search.dangdang.com/?key=HTML5与CSS3权威指南" target="_blank">
										<div class="main_classify_list">HTML5与CSS3权威指南</div>
									</a>
																	<a href="http://search.dangdang.com/?key=Node.js开发指南" target="_blank">
										<div class="main_classify_list">Node.js开发指南</div>
									</a>
																	<a href="http://search.dangdang.com/?key=CSS网站布局实录(第二版)" target="_blank">
										<div class="main_classify_list">CSS网站布局实录(第二版)</div>
									</a>
																	<a href="http://search.dangdang.com/?key=HTML5移动Web开发指南" target="_blank">
										<div class="main_classify_list">HTML5移动Web开发指南</div>
									</a>
																	<a href="http://search.dangdang.com/?key=Node.js实战" target="_blank">
										<div class="main_classify_list">Node.js实战</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_5" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">免费素材</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">设计导航</div>
								<div class="main_classify_war">
																	<a href="http://hao.xueui.cn/" target="_blank">
										<div class="main_classify_list">学UI网设计导航</div>
									</a>
																	<a href="http://so.uehtml.com/" target="_blank">
										<div class="main_classify_list">uesoso网络收藏</div>
									</a>
																	<a href="http://hao.shejipai.cn/" target="_blank">
										<div class="main_classify_list">设计派导航</div>
									</a>
																	<a href="http://www.jiawin.com/sitemap" target="_blank">
										<div class="main_classify_list">觉唯网站地图</div>
									</a>
																	<a href="http://www.58img.com/hao" target="_blank">
										<div class="main_classify_list">WEB前端资源网</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">素材下载</div>
								<div class="main_classify_war">
																	<a href="http://cn.365psd.com/" target="_blank">
										<div class="main_classify_list">365psd</div>
									</a>
																	<a href="http://www.17sucai.com/" target="_blank">
										<div class="main_classify_list">17素材</div>
									</a>
																	<a href="http://www.jiawin.com/topics/resource" target="_blank">
										<div class="main_classify_list">觉唯设计</div>
									</a>
																	<a href="http://www.58pic.com/" target="_blank">
										<div class="main_classify_list">千图网</div>
									</a>
																	<a href="http://www.uehtml.com/" target="_blank">
										<div class="main_classify_list">UE设计平台</div>
									</a>
																	<a href="http://www.ui.cn/" target="_blank">
										<div class="main_classify_list">UI中国</div>
									</a>
																	<a href="http://www.uisdc.com/" target="_blank">
										<div class="main_classify_list">优设-UISDC</div>
									</a>
																	<a href="http://www.xueui.cn/" target="_blank">
										<div class="main_classify_list">学UI网</div>
									</a>
																	<a href="http://www.58img.com/" target="_blank">
										<div class="main_classify_list">前端资源网</div>
									</a>
																	<a href="http://www.xwcms.net/" target="_blank">
										<div class="main_classify_list">xw素材网</div>
									</a>
																	<a href="http://hulibin.zcool.com.cn/" target="_blank">
										<div class="main_classify_list">ZCOOL站酷</div>
									</a>
																	<a href="http://www.uiparade.com/" target="_blank">
										<div class="main_classify_list">UI.PARADE</div>
									</a>
																	<a href="http://cn.clipart.me/" target="_blank">
										<div class="main_classify_list">CLIPART.ME</div>
									</a>
																	<a href="http://sc.chinaz.com/" target="_blank">
										<div class="main_classify_list">站长素材</div>
									</a>
																	<a href="http://www.lanrenzhijia.com/" target="_blank">
										<div class="main_classify_list">懒人之家</div>
									</a>
																	<a href="http://www.internetke.com/" target="_blank">
										<div class="main_classify_list">科e互联</div>
									</a>
																	<a href="http://www.ffpic.com/" target="_blank">
										<div class="main_classify_list">非凡图库</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">图标库</div>
								<div class="main_classify_war">
																	<a href="http://www.iconfont.cn/" target="_blank">
										<div class="main_classify_list">阿里巴巴矢量图</div>
									</a>
																	<a href="http://ionicons.com/" target="_blank">
										<div class="main_classify_list">Ionicons</div>
									</a>
																	<a href="http://hao.shejipai.cn/" target="_blank">
										<div class="main_classify_list">设计派导航</div>
									</a>
																	<a href="http://fontawesome.io/" target="_blank">
										<div class="main_classify_list">FontAwesome</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_6" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">数据接口/平台</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">开放平台</div>
								<div class="main_classify_war">
																	<a href="http://developer.baidu.com/" target="_blank">
										<div class="main_classify_list">百度开放云平台</div>
									</a>
																	<a href="http://open.qq.com/" target="_blank">
										<div class="main_classify_list">腾讯开放平台</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">Web Api</div>
								<div class="main_classify_war">
																	<a href="http://www.36wu.com/Service" target="_blank">
										<div class="main_classify_list">云聚数据</div>
									</a>
																	<a href="http://www.bejson.com/go.html?u=http://www.bejson.com/webInterface.html" target="_blank">
										<div class="main_classify_list">常用接口大全</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_7" class="content_list wow fadeInDown"  data-wow-offset="300">
					  	<div class="content_list_title">实用工具</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">编辑器/IDE</div>
								<div class="main_classify_war">
																	<a href="http://www.sublimetext.com/" target="_blank">
										<div class="main_classify_list">Sublime Text</div>
									</a>
																	<a href="https://atom.io/" target="_blank">
										<div class="main_classify_list">Atom</div>
									</a>
																	<a href="http://www.dcloud.io/" target="_blank">
										<div class="main_classify_list">HBuilder</div>
									</a>
																	<a href="http://www.jetbrains.com/webstorm/" target="_blank">
										<div class="main_classify_list">WebStorm</div>
									</a>
																	<a href="https://www.visualstudio.com/products/code-vs" target="_blank">
										<div class="main_classify_list">Visual Studio Code</div>
									</a>
																	<a href="http://www.adobe.com/cn/products/dreamweaver.html" target="_blank">
										<div class="main_classify_list">Dreamweaver</div>
									</a>
																	<a href="http://www.jetbrains.com/idea/" target="_blank">
										<div class="main_classify_list">IntelliJIDEA</div>
									</a>
																	<a href="http://www.aptana.com/" target="_blank">
										<div class="main_classify_list">Aptana</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">在线编辑器</div>
								<div class="main_classify_war">
																	<a href="http://runjs.cn/code" target="_blank">
										<div class="main_classify_list">RunJS</div>
									</a>
																	<a href="http://jsfiddle.net/" target="_blank">
										<div class="main_classify_list">JSFIDDLE</div>
									</a>
																	<a href="http://jsbin.com/?html,output" target="_blank">
										<div class="main_classify_list">JS Bin</div>
									</a>
																	<a href="http://cssdeck.com/" target="_blank">
										<div class="main_classify_list">cssdeck</div>
									</a>
																	<a href="http://codepen.io/" target="_blank">
										<div class="main_classify_list">CODEPEN</div>
									</a>
																	<a href="http://jsdo.it/" target="_blank">
										<div class="main_classify_list">jsdo.it</div>
									</a>
																	<a href="http://dabblet.com/" target="_blank">
										<div class="main_classify_list">dabblet</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">性能测试</div>
								<div class="main_classify_war">
																	<a href="http://www.alibench.com/" target="_blank">
										<div class="main_classify_list">阿里测</div>
									</a>
																	<a href="http://www.webpagetest.org/" target="_blank">
										<div class="main_classify_list">WebPageTest</div>
									</a>
																	<a href="http://gtmetrix.com/" target="_blank">
										<div class="main_classify_list">GTmetrix</div>
									</a>
																	<a href="http://www.httpwatch.com/" target="_blank">
										<div class="main_classify_list">HttpWatch</div>
									</a>
																	<a href="http://browsershots.org/" target="_blank">
										<div class="main_classify_list">BROWSERSHOTS</div>
									</a>
																	<a href="http://www.webpagetest.org/mobile" target="_blank">
										<div class="main_classify_list">Mobile testing</div>
									</a>
																	<a href="http://jigsaw.w3.org/css-validator/" target="_blank">
										<div class="main_classify_list">Feed validator</div>
									</a>
																	<a href="http://safeweb.norton.com/" target="_blank">
										<div class="main_classify_list">Website vulnerability tool</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">格式化/压缩</div>
								<div class="main_classify_war">
																	<a href="http://www.bejson.com/go.html?u=http://www.bejson.com/jshtml_fmt.html" target="_blank">
										<div class="main_classify_list">JSON/JavaScript/HTML格式化</div>
									</a>
																	<a href="http://tool.oschina.net/codeformat/json" target="_blank">
										<div class="main_classify_list">JSON格式化</div>
									</a>
																	<a href="http://tool.oschina.net/codeformat/xml" target="_blank">
										<div class="main_classify_list">XML格式化</div>
									</a>
																	<a href="http://tool.oschina.net/codeformat/sql" target="_blank">
										<div class="main_classify_list">SQL格式化</div>
									</a>
																	<a href="http://tool.oschina.net/codeformat/html" target="_blank">
										<div class="main_classify_list">HTML格式化</div>
									</a>
																	<a href="http://tool.oschina.net/codeformat/css" target="_blank">
										<div class="main_classify_list">CSS格式化</div>
									</a>
																	<a href="http://tool.oschina.net/less" target="_blank">
										<div class="main_classify_list">Less编译</div>
									</a>
																	<a href="http://tool.css-js.com/" target="_blank">
										<div class="main_classify_list">在线CSS/JS压缩</div>
									</a>
																	<a href="http://tool.oschina.net/jscompress" target="_blank">
										<div class="main_classify_list">HTML/CSS/JavaScript压缩</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">CSS3在线生成</div>
								<div class="main_classify_war">
																	<a href="http://preloaders.net/" target="_blank">
										<div class="main_classify_list">Preloaders</div>
									</a>
																	<a href="http://www.colorzilla.com/gradient-editor/" target="_blank">
										<div class="main_classify_list">Ultimate CSS Gradient Generator</div>
									</a>
																	<a href="http://css3generator.com/" target="_blank">
										<div class="main_classify_list">CSS3 Generator</div>
									</a>
																	<a href="http://www.css3maker.com/" target="_blank">
										<div class="main_classify_list">CSS3 Maker</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">加密/转码</div>
								<div class="main_classify_war">
																	<a href="http://tool.oschina.net/encrypt?type=3" target="_blank">
										<div class="main_classify_list">BASE64编码/解码</div>
									</a>
																	<a href="http://tool.oschina.net/encrypt" target="_blank">
										<div class="main_classify_list">加密/解密</div>
									</a>
																	<a href="http://tool.oschina.net/encrypt?type=2" target="_blank">
										<div class="main_classify_list">散列/哈希</div>
									</a>
																	<a href="http://tool.oschina.net/encrypt?type=4" target="_blank">
										<div class="main_classify_list">图片/BASE64转换</div>
									</a>
																	<a href="http://tool.oschina.net/hexconvert" target="_blank">
										<div class="main_classify_list">进制转换</div>
									</a>
																	<a href="http://tool.oschina.net/qr" target="_blank">
										<div class="main_classify_list">二维码生成/解码</div>
									</a>
																	<a href="http://tool.oschina.net/encode?type=4" target="_blank">
										<div class="main_classify_list">URL转码</div>
									</a>
																</div>
							</div>
													<div class="main_classify">
								<div class="main_classify_name">其他工具</div>
								<div class="main_classify_war">
																	<a href="http://www.bitbug.net/" target="_blank">
										<div class="main_classify_list">ico制作</div>
									</a>
																	<a href="http://www.appcan.cn/" target="_blank">
										<div class="main_classify_list">AppCan</div>
									</a>
																	<a href="http://tool.oschina.net/regex" target="_blank">
										<div class="main_classify_list">正则表达式测试</div>
									</a>
																	<a href="http://tool.oschina.net/alloyphoto" target="_blank">
										<div class="main_classify_list">AlloyPhoto图片处理</div>
									</a>
																	<a href="http://tool.oschina.net/highlight" target="_blank">
										<div class="main_classify_list">代码着色</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_8" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">找工作</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">求职网站</div>
								<div class="main_classify_war">
																	<a href="https://www.nashangban.com/" target="_blank">
										<div class="main_classify_list">哪上班</div>
									</a>
																	<a href="http://www.lagou.com" target="_blank">
										<div class="main_classify_list">拉勾网</div>
									</a>
																	<a href="http://www.neitui.me/" target="_blank">
										<div class="main_classify_list">内推网</div>
									</a>
																	<a href="http://www.w3cfuns.com/job.php" target="_blank">
										<div class="main_classify_list">前端网</div>
									</a>
																	<a href="http://www.nowcoder.com/recommand" target="_blank">
										<div class="main_classify_list">牛客网</div>
									</a>
																</div>
							</div>
												</div>
					</div>
									<div id="_page_9" class="content_list wow fadeInDown" data-wow-offset="300">
					  	<div class="content_list_title">我的链接</div>
					  	<div class="content_list_main">
													<div class="main_classify">
								<div class="main_classify_name">我的链接</div>
								<div class="main_classify_war">
																	<a href="http://resume.ztf.me" target="_blank">
										<div class="main_classify_list">个人主页</div>
									</a>
																	<a href="resume/projects.html" target="_blank">
										<div class="main_classify_list">我的项目列表</div>
									</a>
																</div>
							</div>
												</div>
					</div>
								<div class="content_list">
			  		<div class="content_list_title">我的分享</div>
			  		<div class="content_list_main">
			  			<!-- <div class="link_me">
			  				<a href="'+data.blog+'" target="_blank"><img src="./images/me.png" style="height: 60px;" /></a>
			  			</div> -->
			  			<div class="link_me">
			  				<a href="'+data.github+'" target="_blank"><img src="./images/github.png" style="height: 60px;" /></a>
			  			</div>
			  			<div class="link_me">
			  				<a href="'+data.coding+'" target="_blank"><img src="./images/coding.png" style="height: 60px;" /></a>
			  			</div>
			  			<div class="link_me">
			  				<a href="'+data.w3cfuns+'" target="_blank"><img src="./images/w3cfuns.png" style="height: 60px;" /></a>
			  			</div>
					</div>
				</div>
			</div>
		</div>
		<footer id="footer">
			<div class="footer_war war wow fadeInDown"  >
				<div class="message">
					如果您有更好的建议或更多的资源，欢迎您一起分享（请发送至邮箱：i@ztf.me && xinliuruoxi@foxmail.com）
					</br>Because of love, so love! 让更多的人了解前端、让更多的人熟悉前端、让更多的人痴迷前端，让我们奉献于前端...
				</div>
				<div class="declare">
					Copyright &copy; 2015-2016 ZTF Copyright Holder All Rights Reserved&nbsp;
					<a href="http://www.miitbeian.gov.cn/" target="_blank">http://ztf.me/FrontEndGuide/</a>
				</div>
			</div>
		</footer>
		<aside id="backTop"></aside>
	</body>
<script>
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
	new WOW().init();
};
</script>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
	<script type="text/javascript" src="js/index.js" ></script>
</html>

